<template>
  <view class="live">
    <map
      id="map"
      style="width: 100%; height: 300px;"
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      show-compass
      show-scale
      @tap="handleMapTap"
    ></map>
    <button @click="getLocation">获取当前位置</button>
    <button @click="searchLocation">搜索位置</button>
  </view>
</template>

<script>
export default {
  name: "LiveComponent",
  data() {
    return {
      latitude: 0, // 当前纬度
      longitude: 0, // 当前经度
      markers: [], // 地图标记
    };
  },
  methods: {
    // 获取当前位置
    async getLocation() {
      try {
        const res = await uni.getLocation({
          type: "wgs84", // 返回可以用于wx.openLocation的经纬度
          success: (res) => {
            console.log(res)
            this.latitude = res.latitude;
            this.longitude = res.longitude;
            this.markers = [
              {
                id: 1,
                latitude: res.latitude,
                longitude: res.longitude,
                width: 30,
                height: 30,
              },
            ];
          },
          fail: (err) => {
            console.error("获取位置失败", err);
            uni.showToast({
              title: "获取位置失败",
              icon: "none",
            });
          },
        });
      } catch (err) {
        console.error("获取位置失败", err);
      }
    },
    // 搜索位置
    async searchLocation() {
      try {
        const res = await uni.chooseLocation({
          success: (res) => {
            this.latitude = res.latitude;
            this.longitude = res.longitude;
            this.markers = [
              {
                id: 1,
                latitude: res.latitude,
                longitude: res.longitude,
                width: 30,
                height: 30,
              },
            ];
          },
          fail: (err) => {
            console.error("选择位置失败", err);
            uni.showToast({
              title: "选择位置失败",
              icon: "none",
            });
          },
        });
      } catch (err) {
        console.error("选择位置失败", err);
      }
    },
    // 地图点击事件
    handleMapTap(e) {
      console.log("地图点击事件", e);
    },
    chooseVideo() {
      uni.chooseVideo({
        success: res => {
          const uploadFile = new BigUpload({
            url: `这是一个文件上传的路径`,
            filePath: res.tempFilePath,
            type: 'video/mp4',
            byteLength: res.size,
            size: 2097152,
            fileName: 'weixin_video.mp4',
            drowSpeed: (p) => {this.percent = p},
            callback: (state) => {
              if (state) {
                this.percent = 100
                this.uploadStatus = '上传完成'
                this.videoMd5 = state.md5
              }
            }
          })
          uploadFile.startUpload()
        }
      })
    },
    startUpload() {
        this.chunkSize = this.Setting.size
        if (!this.Setting.filePath) {
            return
        }
        this.pt_md5 = ''
        this.chunks = Math.ceil(this.Setting.byteLength / this.chunkSize)
        this.currentChunk = 0
    }


  },
  mounted() {
    // 在页面加载时尝试获取位置
    this.getLocation();
  },
};
</script>

<style scoped lang="scss">
.live {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
button {
  margin: 10px 0;
}
</style>